<template>
	<view class="bottom_navs">
		<navigator url="../home/home" open-type="redirect"	 class="bottom_nav">
			<view :class="homeActive" @click="updateIcon">
				<i class="iconfont icon-zhuye"></i>
				<text>首页</text>
			</view>
		</navigator>

		<navigator url="../category/category"  open-type="redirect"	 class="bottom_nav">
			<view :class="categoryActive" @click="updateIcon">
				<i class="iconfont icon-fenlei1"></i>
				<text>分类</text>
			</view>
		</navigator>

		<navigator url="../cart/cart" open-type="redirect" class="bottom_nav">
			<view :class="cartActive" @click="updateIcon">
				<i class="iconfont icon-gouwuche1"><text class="cart-counter" v-if="cartCounter > 0">{{ cartCounter }}</text></i>
				<text>购物车</text>				
			</view>
		</navigator>

		<navigator url="../mine/mine" open-type="redirect" class="bottom_nav">
			<view :class="mineActive" @click="updateIcon">
				<i class="iconfont icon-gerenzhongxin"></i>
				<text>我的</text>
			</view>
		</navigator>
	</view>
</template>

<script>
	
	import { mapState,mapMutations, mapActions, mapGetters } from 'vuex';
	
	
export default {
	data() {
		return {
			homeActive: '',
			categoryActive: '',
			cartActive: '',
			mineActive: ''
		};
	},
	 
	methods: {
		updateIcon() {
			let currentPath = this.currentPath;
			
			

			if (currentPath.includes('home')) {
				this.homeActive = 'active';
				this.cartActive = '';
				this.mineActive = '';
			} else if (currentPath.includes('cart')) {
				this.homeActive = '';
				this.cartActive = 'active';
				this.mineActive = '';
			} else if (currentPath.includes('category')) {
				this.homeActive = '';
				this.categoryActive = 'active';
				this.mineActive = '';
			} else if (currentPath.includes('mine')) {
				this.homeActive = '';
				this.cartActive = '';
				this.mineActive = 'active';
			} else {
				this.homeActive = 'active';
				this.cartActive = '';
				this.mineActive = '';
			}
			
			 
			
		}
	},
	computed: {
	 
		
		...mapState([
			'cartCounter'
		]),
		
		currentPath() {
			let pages = getCurrentPages();
			let route = pages[pages.length - 1].route;
			
			return route;
		}
	},
	mounted() {
		this.updateIcon();			 
		
	}
};
</script>

<style lang="scss">

.bottom_navs {
	overflow: hidden;
	position: fixed;
	z-index: 999;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #fff;
	display: -moz-box;
	display: -webkit-box;
	display: box;
	border-top: 1px solid #ececec;
	.bottom_nav {
		height: 55px;
		color: #999;
		font-size: 12px;
		padding-top: 5px;
		text-align: center;
		width: 100%;
		display: block;
		outline: none;
		transition-duration: 150ms;
		-moz-box-flex: 1;
		-webkit-box-flex: 1;
		box-flex: 1;
		
		.active {
			color: $colorPrimary;
		}
		.iconfont {
			font-size: 20px;
			margin: 5px auto 5px auto;
		}
		text {
			display: block;
		}
	}
}

.bottom_nav{
	.iconfont {
		position: relative;
		display: inline-block;
		.cart-counter {
			position: absolute;
			width: 20px;
			height: 20px;
			top: -8px;
			right: -12px;
			line-height: 20px;
			border-radius: 50%;
			background-color: red;
			color: #fff;
			font-size: 10px;
		}
	}
}
</style>
